<template>
	<view class="container">
		<!-- 空白页 -->
		<view v-if="!hasLogin || empty===true" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="cart-list">
				<block v-for="(item, index) in cartList" :key="index">
					<view
						class="cart-item" 
						:class="{'b-b': index!==cartList.length-1}"
					>
						<view class="image-wrapper">
							<image :src="item.cover_image" mode="aspectFill" ></image>
						</view>
						<view class="item-right">
							<text class="clamp title">{{item.name}}</text>
							<text class="attr">{{item.spec_code_text.join(" ")}}</text>
							<text class="price">¥{{item.show_price}}</text>
 						<card_numbox
						class="step"
						:isMax="item.product_num>=item.nowstock?true:false"
						:isMin="item.product_num===1"
						:index="index"
						:value="item.product_num>item.nowstock?item.nowstock:item.product_num"
						@eventChange="numberChange"
						></card_numbox>
						 
						</view>
						<text class="del-btn yticon icon-fork" @click="deleteCartItem(item.jyshop_card_id)"></text>
					</view>
				</block>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
			 
				<view class="total-box">
					<view>合计: <text class="price">¥{{totalprice}}</text></view>
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	 
 
	export default {
	 
		data() {
			return {
				hasLogin:false,
				totalprice: 0, //总价格
				allChecked: false, //全选状态  true|false
				empty: false, //空白页  true|false
				cartList: [],
			};
		},
		onLoad(){
			this.hasLogin = this.$util.getToken() !=null ? true :false;
			this.getCardList();
		 
		},
		watch:{
			//显示空白页
			cartList(e){
				let empty = e.length === 0 ? true: false;
				if(this.empty !== empty){
					this.empty = empty;
				}
			}
		},
	 
		methods: {
		 
			getCardList(){
				let that = this;
				this.$util.req("/card/getProductList",{"cfrom":"card",'retfield':"base"},true,function(res){
					that.cartList = res.data.product_list;
					that.totalprice = res.data.total_sales_price;
				});
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/errorImage.jpg';
			},
			navToLogin(){
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
		 
			//数量变化
			numberChange(data){
		 
				let prdinfo = this.cartList[data.index];
					console.log("数字变化");
					console.log(prdinfo);
 				let that = this;
				let params = {
					product_id:prdinfo.id,
					spec_code:prdinfo.spec_code,
					product_num:data.number
				}
				 this.$util.req("/card/addProduct",params,true,function(res){
					 that.getCardList();
				 });
			},
			//删除
			deleteCartItem(id){
				  let that = this;
				  let params={
					  jyshop_card_id:id
				  }
				  this.$util.req("/card/delProduct",params,true,function(res){
				  					 that.getCardList();
				  });
			},
		 
		 
			//创建订单
			createOrder(){
				 
				uni.navigateTo({
					url: '/pages/order/createOrder?cfrom=card'
				})
				
			}
		}
	}
</script>

<style lang='scss'>
	.container{
		padding-bottom: 134upx;
		/* 空白页 */
		.empty{
			position:fixed;
			left: 0;
			top:0;
			width: 100%;
			height: 100vh;
			padding-bottom:100upx;
			display:flex;
			justify-content: center;
			flex-direction: column;
			align-items:center;
			background: #fff;
			image{
				width: 240upx;
				height: 160upx;
				margin-bottom:30upx;
			}
			.empty-tips{
				display:flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;
				.navigator{
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	}
	/* 购物车列表项 */
	.cart-item{
		display:flex;
		position:relative;
		padding:30upx 40upx;
		.image-wrapper{
			width: 230upx;
			height: 230upx;
			flex-shrink: 0;
			position:relative;
			image{
				border-radius:8upx;
			}
		}
		.checkbox{
			position:absolute;
			left:-16upx;
			top: -16upx;
			z-index: 8;
			font-size: 44upx;
			line-height: 1;
			padding: 4upx;
			color: $font-color-disabled;
			background:#fff;
			border-radius: 50px;
		}
		.item-right{
			display:flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position:relative;
			padding-left: 30upx;
			.title,.price{
				font-size:$font-base + 2upx;
				color: $font-color-dark;
				height: 40upx;
				line-height: 40upx;
			}
			.price{
				color:#ff0000;
			}
			.attr{
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				height: 50upx;
				line-height: 50upx;
			}
			.price{
				height: 50upx;
				line-height:50upx;
			}
		}
		.del-btn{
			padding:4upx 10upx;
			font-size:34upx; 
			height: 50upx;
			color: $font-color-light;
		}
	}
	/* 底部栏 */
	.action-section{
		/* #ifdef H5 */
		margin-bottom:100upx;
		/* #endif */
		position:fixed;
		left: 0upx;
		bottom:1upx;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100upx;
		padding: 0 30upx;
		background: rgba(255,255,255,.9);
		border-top: 2upx solid #DCDFE6; 
	 
	 
		.total-box{
			flex: 1;
			display:flex;
			flex-direction: column;
			text-align:right;
			font-size: $font-base;
			padding-right: 40upx;
			.price{
				font-size: $font-lg;
				color: #fa436a;
			}
			 
		}
		.confirm-btn{
			padding: 0 38upx;
			margin: 0;
			border-radius: 20upx;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
		 
		}
	}
	/* 复选框选中状态 */
	.action-section .checkbox.checked,
	.cart-item .checkbox.checked{
		color: $uni-color-primary;
	}
</style>
